<script lang="ts" setup>
import { reactive, onActivated } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryShortBike } from '@/api/bike'
import { queryShortBikeCol } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { lockStatus, bikeOnlineStatus, formatterPower } from '@/utils/formatter'
import { FeeRulesType } from '@/types/enum'
import { useRoute, useRouter } from 'vue-router'
import { useActivated } from '@/hooks/useActivated'
defineOptions({
  name: 'FeeRulesContactBike'
})
const route = useRoute()
const form = reactive({
  storeId: route.query.storeId as string,
  feeRule: route.query.feeRule as FeeRulesType,
  type: '0'
})
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange } =
  useTable<queryShortBikeCol>(queryShortBike, getToken() ?? '', () => form)

const router = useRouter()
const bikeLocation = (row: queryShortBikeCol) => {
  router.push({
    name: 'TimeBikeLocation',
    query: {
      bikeId: row.bikeId
    }
  })
}
onActivated(() => {
  form.storeId = (route.query.storeId as string) || ''
  form.feeRule = (route.query.feeRule as FeeRulesType) || ''
})
useActivated(
  form,
  { form },
  [
    { key: 'storeId', path: 'form.storeId' },
    { key: 'feeRule', path: 'form.feeRule' }
  ],
  load,
  []
)
</script>

<template>
  <div class="xy-container">
    <el-table :data="data" v-loading="loading">
      <el-table-column prop="bikeCode" label="车辆编号" />
      <el-table-column prop="bikeLockId" label="中控编号" />
      <el-table-column prop="bikeStatus" label="车辆状态" />
      <el-table-column prop="lockStatus" label="车锁状态" :formatter="lockStatus" />
      <el-table-column
        prop="bikeOnlineStatus"
        label="网络状态"
        align="center"
        :formatter="bikeOnlineStatus"
      />
      <el-table-column
        prop="powerLevel"
        label="车辆电量"
        :formatter="formatterPower"
        align="center"
      />
      <el-table-column prop="bikeModel" label="车辆型号" align="center" />
      <el-table-column prop="inputVoltage" label="额定电压" />
      <el-table-column prop="frameNumber" label="车架号" />
      <el-table-column prop="carNumber" label="车辆牌照号" />
      <el-table-column label="车辆位置">
        <template #default="scope">
          <el-button link type="primary" @click="bikeLocation(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
